<template>
  <div class="article-suspended-panel">

    <el-badge :value="detail.likes" class="block">
      <div class="panel-btn" @click="addlikes()" v-if='!likesdisable'>
        <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1747">
          <path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
            p-id="1748"></path>
        </svg>
      </div>
      <div class="panel-btn likes-disable" v-if='likesdisable' >
        <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1747">
          <path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
            p-id="1748"></path>
        </svg>
      </div>
    </el-badge>
    <el-badge :value="detail.commentCount" class="block">
      <div class="panel-btn">
        <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1447">
          <path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333z m-102.218667 549.76a32 32 0 1 0-40.917333 49.216A223.178667 223.178667 0 0 0 512 736c52.970667 0 103.189333-18.485333 143.104-51.669333a32 32 0 1 0-40.906667-49.216A159.189333 159.189333 0 0 1 512 672a159.189333 159.189333 0 0 1-102.218667-36.906667z"
            p-id="1448"></path>
        </svg>
      </div>
    </el-badge>
    <div class="share-title">分享</div>
    <div class="panel-btn" @click="sharebtn('weibo')">
      <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5111">
        <path d="M739.2 491.52s133.76-237.44-256-112.64a94.72 94.72 0 0 0 0-143.36C346.24 133.12 0 460.16 0 654.72c0 118.4 128 272 417.28 272 364.8 0 479.36-199.68 479.36-296.96-0.64-133.76-157.44-138.24-157.44-138.24z m-309.76 384c-170.24 16-316.8-64-327.04-179.84S220.8 473.6 390.4 457.6 704 522.24 718.08 640s-118.4 219.52-288.64 235.52zM369.28 540.8a158.08 158.08 0 0 0-142.72 170.88 158.08 158.08 0 0 0 192 114.56 158.08 158.08 0 0 0 142.72-170.88 158.08 158.08 0 0 0-192-114.56zM353.28 768a51.2 51.2 0 1 1-27.52-98.56 51.2 51.2 0 1 1 27.52 98.56z m77.44-89.6a27.52 27.52 0 1 1 27.52-27.52 27.52 27.52 0 0 1-27.52 27.52zM967.68 197.12a282.88 282.88 0 0 0-275.84-95.36A35.84 35.84 0 1 0 704 172.8a208.64 208.64 0 0 1 209.28 68.48 195.84 195.84 0 0 1 28.8 188.16 35.84 35.84 0 1 0 64 26.88 270.08 270.08 0 0 0-38.4-259.2zM726.4 232.32a35.84 35.84 0 0 0 10.24 71.04 75.52 75.52 0 0 1 74.24 23.04 67.84 67.84 0 0 1 10.24 64 35.84 35.84 0 1 0 64 26.88 138.24 138.24 0 0 0-19.84-135.04 143.36 143.36 0 0 0-138.88-49.92z"
          p-id="5112"></path>
      </svg>
    </div>
    <div class="panel-btn" @click="sharebtn('qq')">
      <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6385">
        <path d="M206.848 467.968l-1.024-5.12-1.024-6.144-1.024-4.096v-15.36l1.024-5.12 2.048-7.168 1.024-5.12 4.096-7.168 3.072-8.192 6.144-7.168v-11.264l1.024-6.144 3.072-7.168 1.024-8.192 2.048-4.096 1.024-3.072 3.072-4.096 3.072-3.072v-18.432l1.024-9.216 1.024-11.264 4.096-14.336 3.072-12.288 3.072-9.216 3.072-8.192 2.048-7.168 5.12-8.192 4.096-9.216 3.072-8.192 6.144-9.216 6.144-8.192 2.048-6.144 3.072-4.096 6.144-9.216 7.168-9.216 8.192-11.264 8.192-9.216 8.192-9.216 10.24-10.24 11.264-10.24 7.168-6.144 8.192-7.168 10.24-5.12 9.216-6.144 9.216-5.12 11.264-5.12 10.24-4.096 12.288-4.096 10.24-4.096 12.288-4.096 11.264-2.048 13.312-2.048 12.288-3.072 12.288-1.024 12.288-2.048H557.056l13.312 1.024 13.312 1.024 13.312 2.048 12.288 3.072 13.312 3.072 12.288 3.072 13.312 3.072 13.312 5.12 12.288 4.096 11.264 6.144 12.288 6.144 11.264 6.144 11.264 7.168 9.216 7.168 5.12 3.072 4.096 2.048 8.192 7.168 7.168 8.192 8.192 7.168 7.168 8.192 6.144 9.216 7.168 8.192 5.12 8.192 4.096 8.192 6.144 9.216 4.096 7.168 8.192 18.432 3.072 8.192 3.072 8.192 3.072 8.192 2.048 8.192 2.048 7.168 2.048 8.192 4.096 15.36 3.072 13.312 1.024 13.312 1.024 9.216 2.048 15.36 2.048 3.072 1.024 3.072 4.096 8.192 4.096 4.096 2.048 6.144 4.096 6.144 3.072 7.168 2.048 8.192 3.072 8.192 1.024 8.192 1.024 4.096V439.296l-1.024 6.144-2.048 9.216-4.096 6.144-1.024 6.144v1.024l1.024 1.024 2.048 5.12 12.288 17.408 8.192 12.288 5.12 9.216 6.144 9.216 5.12 10.24 6.144 11.264 6.144 12.288 6.144 14.336 3.072 8.192 4.096 9.216 3.072 8.192 3.072 8.192 2.048 8.192 2.048 9.216 4.096 15.36 2.048 15.36 1.024 14.336V685.056l-1.024 7.168-1.024 12.288-3.072 10.24-3.072 11.264-1.024 3.072-2.048 5.12-2.048 3.072-2.048 5.12-2.048 2.048-4.096 4.096-2.048 2.048-2.048 2.048-4.096 1.024-2.048 2.048-3.072 1.024H901.12l-2.048-1.024-5.12-3.072-2.048-1.024-1.024-1.024-3.072-2.048-2.048-3.072-4.096-3.072-4.096-7.168-4.096-6.144-3.072-5.12-4.096-5.12-5.12-11.264-5.12-10.24h-2.048l-1.024 1.024-3.072 3.072-1.024 4.096-5.12 9.216-4.096 15.36-8.192 18.432-5.12 9.216-6.144 8.192-7.168 10.24-7.168 11.264-3.072 4.096-5.12 5.12-10.24 10.24h1.024l1.024 3.072 6.144 2.048 21.504 11.264 9.216 5.12 8.192 5.12 9.216 6.144 9.216 7.168 3.072 3.072 2.048 3.072 4.096 4.096 2.048 5.12 1.024 3.072 1.024 4.096 2.048 3.072 1.024 5.12-1.024 3.072v3.072l-2.048 3.072-1.024 2.048-1.024 3.072-1.024 2.048-4.096 6.144-3.072 3.072-3.072 4.096-3.072 2.048-6.144 5.12-5.12 3.072-7.168 4.096-8.192 3.072-9.216 4.096-4.096 1.024-4.096 1.024-10.24 2.048-11.264 3.072-9.216 2.048-11.264 1.024-12.288 1.024-12.288 1.024h-35.84l-13.312-1.024-13.312-1.024-13.312-1.024-12.288-2.048-14.336-2.048-13.312-3.072-13.312-2.048-13.312-4.096-13.312-4.096-13.312-5.12-7.168-2.048-6.144-3.072-3.072-1.024-5.12-1.024h-23.552l-6.144-1.024-8.192-1.024-5.12 4.096-8.192 5.12-9.216 5.12-11.264 5.12-7.168 4.096-5.12 2.048-15.36 6.144-9.216 2.048-9.216 3.072-11.264 2.048-7.168 1.024h-8.192l-9.216 1.024h-70.656l-21.504-2.048-11.264-1.024-11.264-3.072-9.216-1.024-11.264-2.048-9.216-2.048-9.216-3.072-9.216-3.072-7.168-4.096-8.192-3.072-6.144-4.096-7.168-4.096-3.072-3.072-2.048-3.072-2.048-2.048-2.048-3.072-2.048-2.048-2.048-3.072-1.024-6.144-1.024-4.096-1.024-3.072v-3.072l1.024-3.072v-3.072l1.024-4.096V859.136l1.024-3.072 2.048-5.12 3.072-5.12 1.024-2.048 2.048-2.048 4.096-6.144 3.072-2.048 2.048-1.024 4.096-3.072 5.12-1.024 3.072-2.048 5.12-2.048 4.096-3.072 5.12-1.024 6.144-1.024 5.12-1.024h7.168l7.168-1.024h3.072l1.024-1.024v-2.048l-1.024-1.024-5.12-2.048-9.216-8.192-6.144-5.12-8.192-7.168-7.168-7.168-8.192-9.216-8.192-10.24-4.096-6.144-4.096-6.144-4.096-7.168-3.072-7.168-5.12-7.168-3.072-8.192-4.096-8.192-3.072-8.192-3.072-9.216-2.048-11.264h-2.048v-1.024h-2.048l-1.024 1.024h-1.024l-1.024 2.048v3.072l-1.024 1.024-1.024 3.072-4.096 9.216-2.048 4.096-4.096 4.096-4.096 4.096-4.096 6.144-4.096 5.12-6.144 4.096-5.12 5.12-4.096 3.072-6.144 4.096-6.144 2.048-7.168 3.072H99.328l-1.024-4.096-3.072-1.024-2.048-6.144-1.024-3.072-2.048-5.12-2.048-5.12v-4.096l-2.048-12.288-1.024-6.144v-22.528l1.024-15.36 1.024-8.192 1.024-8.192 2.048-9.216 3.072-8.192 2.048-11.264 3.072-9.216 4.096-9.216 4.096-10.24 4.096-9.216 5.12-10.24 6.144-9.216 6.144-11.264 7.168-9.216 7.168-11.264 5.12-7.168 8.192-8.192 7.168-8.192 4.096-3.072 4.096-5.12 7.168-6.144 6.144-5.12 12.288-10.24 8.192-6.144z"
          p-id="6386"></path>
      </svg>
    </div>

    <el-popover placement="right" width="200" trigger="hover">
      <div id="qrcode"></div>
      <div class="panel-btn" slot="reference">
        <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7111">
          <path d="M692.10173 348.2c-53.7-0.4-106.9 12.7-154.2 38.2-45.7 24.1-84.3 60.2-111.5 104.1-27.3 43.2-41.7 93.1-41.3 144.1 0.2 25.3 4.1 50.6 11.5 74.8h-33.5c-35.6-1.2-71.2-5.6-106.1-13.2l-20.6-3.7-126.1 65.2 34.5-107.9C48.50173 580.2 0.40173 497.7 0.00173 402.3c-0.2-55.3 16.9-109 48.7-154.2 33.5-48.3 79-87 132.2-111.9 57.2-27.6 120.1-41.5 183.6-40.9 56.8-0.2 113.1 11.3 165.3 33.5 49.8 20.8 94.6 52.2 131.2 91.9 33.9 36.2 56.8 81 66.6 129.5-11.2-1-23.3-2-35.5-2zM243.50173 339c12.1 0.8 24.1-2.9 33.5-10.5 9-8.4 13.8-20.2 13.2-32.5 0.6-12.3-4.3-24.1-13.2-32.5-9.1-8.4-21.2-12.7-33.5-11.9-13.4-0.2-26.5 4.1-37.2 11.9-10.1 7.2-16.2 18.9-16.2 31.2-1 13.3 5.2 26.2 16.2 33.9 11 7.1 24 10.8 37.2 10.4zM1024.00173 629.3c-0.4 41.1-12.7 81.4-35.4 115.6-25.1 35.6-56.1 66.8-91.9 91.9l28 91.9L824.30173 875h-5.4c-33.5 9.4-67.7 15.2-102.4 16.9-54.3 0.6-107.9-11.5-156.5-35.4-44.8-22-83.1-54.9-111.5-96-26.7-38.9-40.9-85.1-40.9-132.2-0.2-47.1 14-93.1 40.9-131.8 28.2-41.1 66.8-74.2 111.5-96 48.7-23.9 102.4-36 156.5-35.4 52.2-0.2 103.8 11.9 150.5 35.4 45.3 21.8 84.3 54.9 113.3 96 28.2 38.4 43.4 84.9 43.2 132.8h0.5zM498.80173 250.1c-14-0.6-27.6 3.7-38.9 11.9-11.1 7.2-17.5 19.5-16.9 32.5-0.4 13 6 25.5 16.9 32.5 11.1 8 24.5 12.1 38.2 11.9 12.1 1 24.1-2.7 33.5-10.5 8.2-9 12.5-20.6 11.9-32.5 1.6-12.7-2.9-25.1-11.9-34.1s-21.6-13.2-34.1-11.9h1.4v0.2z m117 334.6c11.9 0.8 23.6-3.3 32.5-11.1 7.4-6.4 11.7-15.6 11.9-25.3-0.4-9.7-4.7-18.9-11.9-25.3-9-7.8-20.6-11.7-32.5-11.1-9.3 0.4-17.9 4.3-24.3 11.1-6.8 6.6-10.9 15.8-11.1 25.3 0.2 9.5 4.1 18.7 11.1 25.3 6.4 6.8 15.1 10.7 24.3 11.1z m199.3 0c11.9 0.8 23.6-3.3 32.5-11.1 7.4-6.4 11.7-15.6 11.9-25.3-0.6-9.9-5.4-19.3-13.2-25.3-8.8-7.4-19.9-11.3-31.2-11.1-9.3 0.2-18.1 4.1-24.3 11.1-6.8 6.6-10.9 15.8-11.1 25.3 0.2 9.5 4.1 18.7 11.1 25.3 6.2 6.8 15 10.9 24.3 11.1z m0 0"
            p-id="7112"></path>
        </svg>
      </div>
    </el-popover>

  </div>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    name: 'share-bar',
    data() {
      return {
        likesdisable:false
      }
    },
    computed: {
      ...mapState('article', ['detail'])
    },
    head() {

      return {

      }
    },
    mounted() {



    },
    methods: {
      addlikes: function() {
        this.$store.dispatch('article/updateLikes', {
         id:this.$route.params.id.replace('.html', ''),
         num: this.detail.likes,
        })
        this.likesdisable=true


      },
      sharebtn: function(type) {
        var templates = {
          qzone: 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{URL}}&title={{TITLE}}&desc={{DESCRIPTION}}&summary={{SUMMARY}}&site={{SOURCE}}&pics={{IMAGE}}',
          qq: 'http://connect.qq.com/widget/shareqq/index.html?url=' + window.location.href + '&title=' + this.detail
            .title + '&pics=' + this.detail.thumbnail + '&summary=' + this.detail.summary + '',
          weibo: 'https://service.weibo.com/share/share.php?url=' + window.location.href + '&title=' + this.detail.title +
            '&pic=' + this.detail.thumbnail + '',
          wechat: 'javascript:',
          douban: 'http://shuo.douban.com/!service/share?href={{URL}}&name={{TITLE}}&text={{DESCRIPTION}}&image={{IMAGE}}&starid=0&aid=0&style=11',
          linkedin: 'http://www.linkedin.com/shareArticle?mini=true&ro=true&title={{TITLE}}&url={{URL}}&summary={{SUMMARY}}&source={{SOURCE}}&armin=armin',
          facebook: 'https://www.facebook.com/sharer/sharer.php?u={{URL}}',
          twitter: 'https://twitter.com/intent/tweet?text={{TITLE}}&url={{URL}}&via={{ORIGIN}}',
          google: 'https://plus.google.com/share?url={{URL}}'
        };
        window.open(templates[type], '_blank');
      },

    }
  }
</script>

<style lang="scss">
  .article-suspended-panel {
    position: fixed;
    margin-left: -4rem;
    top: 16rem;
  }

  .panel-btn {
    color: #c1c1c1;
    text-align: center;
    font-size: 1.3rem;
    position: relative;
    margin-bottom: .75rem;
    width: 2.4rem;
    height: 2.4rem;
    line-height: 2.4rem;
    background-color: #fff;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04);
    cursor: pointer;
    box-sizing: border-box;

    &:hover {
      color: #999999;
    }
  }

  .share-title {
    margin: 1rem 0 0.8rem;
    font-size: 0.8rem;
    text-align: center;
    color: #c6c6c6;
    user-select: none;
  }
  .likes-disable{
    color: $color-theme;
    &:hover {
     color: $color-theme;
    }
  }
</style>
